import React, { useState } from 'react'
import One from './One';
import Two from './Two';
import Three from './Three';

export default function DiffCom() {
  //声明一个状态
  let [count, setCount] = useState(0);
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => {
        setCount(count + 1);
      }}>新增</button>
      <hr />
      <h4>更新前后是不同的标签</h4>
      {count % 2 ? <span>111</span> : <p>222</p>}
      <h4>更新前后是相通的标签元素</h4>
      {count % 2 ? <span t="100">111</span> : <span t="200">222</span>}
      <h4>更新前后是不同的组件</h4>
      {count % 2 ? <One /> : <Two />}
      <h4>更新前后是相同组件</h4>
      {count % 2 ? <Three count='1'/> : <Three count="2" />}
    </div>
  )
}
